<template>
  <div>
  <van-dropdown-menu active-color="#21b97a">
  <van-dropdown-item title="区域" >
    <van-picker show-toolbar title="标题" :columns="columns" @confirm="onConfirm">
      <!-- <default></default> -->
    </van-picker>
<van-row >
  <van-col class="cols" span="8">取消</van-col>
  <van-col class="colb" span="16" @click="btn">确认</van-col>
</van-row>
 </van-dropdown-item>
  <van-dropdown-item title="方式" ></van-dropdown-item>
  <van-dropdown-item title="租金" ></van-dropdown-item>
  <van-dropdown-item title="筛选" ></van-dropdown-item>
</van-dropdown-menu>
  </div>
</template>

<script>
import { selectHouseList } from '@/api'
import { Toast } from 'vant'
export default {
  data () {
    return {
      // 虚假的数据
      // 从本地缓存取得当前地区的value
      cityValue: localStorage.getItem('cityValue'),
      areaList: [],
      text: [],
      text2: [],
      columns: [
        {
          text: '地区',
          children: []
        },
        {
          text: '地铁',
          children: [
            {
              text: '福州'
              // children: [{ text: '鼓楼区' }, { text: '台江区' }]
            },
            {
              text: '厦门'
              // children: [{ text: '思明区' }, { text: '海沧区' }]
            }
          ]
        }
      ]
    }
  },
  methods: {
    onConfirm (value, index) {
      Toast(`当前值：${value}, 当前索引：${index}`)
    },
    async selectHouseListFn () {
      // 发起请求获得数据
      const res = await selectHouseList(this.cityValue)
      this.List = res.data.body
      // 获得地区数据
      // this.areaList = this.List.area.children.map(item => {
      //   return { text: item.label, value: item.value, chlidren: item.children }
      // })
      // console.log(this.areaList)
      // 测试
      this.setLIst()
    },
    async  setLIst () {
      this.columns[0].children = await this.List.area.children.map(item => {
        console.log(item.children)
        console.log(typeof (item.children))
        return { text: item.label, value: item.value, children: [item.children] }
      })
      // 地铁的数据
      this.columns[1].children = this.List.subway.children.map(item => {
        return { text: item.label, value: item.value }
      })
    },
    btn (value, index) {
      console.log(this.List.area.children[1].children[0])
      console.log(this.List.area.children[1].children.map(obj => {
        return { text: obj.label, value: obj.value }
      }))
      // console.log(typeof (this.List.area.children[1].children))
      // console.log(Object.keys(this.List.area.children[1].children))
      // console.log(Object.values(this.List.area.children[1].children))
      // Toast(`当前值：${value}, 当前索引：${index}`)
    }
  },
  created () {
    this.selectHouseListFn()
    console.log(this.cityValue)
  }
}

</script>

<style>
 .cols{
    text-align: center;
    background-color: #fff;
    color: #21b97a;
  }
  .colb{
    text-align: center;
    background-color:#21b97a;
    color:  #fff;
  }
</style>
